<template>
  <div class="login-container">
    <div class="login-card">
      <h2 class="login-title">系统登录</h2>
      
      <div class="form-group">
        <label for="username">账号</label>
        <input 
          type="text" 
          id="username" 
          v-model="username" 
          placeholder="请输入账号"
          class="form-input"
        >
      </div>
      
      <div class="form-group">
        <label for="password">密码</label>
        <input 
          type="password" 
          id="password" 
          v-model="password" 
          placeholder="请输入密码"
          class="form-input"
        >
      </div>
      
      <button @click="handleLogin" class="login-button">登录</button>
      
      <!-- 提示信息 -->
      <div v-if="message" :class="messageClass" class="message">
        {{ message }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      message: '',
      messageClass: ''
    }
  },
  methods: {
    handleLogin() {
      // 验证账号密码
      if (this.username === 'admin' && this.password === '123456') {
        this.message = '登录成功！'
        this.messageClass = 'success'
      } else {
        this.message = '登录失败，请检查账号或密码！'
        this.messageClass = 'error'
      }
      
      // 3秒后清除提示信息
      setTimeout(() => {
        this.message = ''
      }, 3000)
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 350px;
  padding: 2rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.form-input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #42b983;
  box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
}

.login-button {
  width: 100%;
  padding: 0.8rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #359e75;
}

.message {
  margin-top: 1rem;
  padding: 0.8rem;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

.success {
  background-color: rgba(66, 185, 131, 0.1);
  color: #42b983;
  border: 1px solid #42b983;
}

.error {
  background-color: rgba(255, 99, 132, 0.1);
  color: #ff6384;
  border: 1px solid #ff6384;
}
</style>
